<template>
	<view>
		<view class="eleCard" :style="{ borderBottom: isLast ? 'none' : '1rpx soild #eee' }" @click="toEleDetail(msg)">
			<view>
				<view class="top">
					<view class="left name">
						<image src="@/static/images/index/total.png" mode=""></image>
						{{ msg.elevatorAddress }}
						<text :class="['tag', msg.isStop == 1 ? 'green' : 'red']">{{
							msg.isStop == 1 ? '正常运行' : '停梯'
						}}</text>
					</view>
				</view>
				<view class="content">
					<view class="content-left">
						{{ `${msg.useType == 0 ? '年审梯' : '非年审梯'} | ${msg.modeName || '-'} | ${msg.brandName || '-'} |
												${getYear(msg.madeDate || '')}年` }}
					</view>
					
				</view>
				<view class="bottom" v-if="!msg.isComplete" @click.stop="toMorePage(msg)">
						待完善资料
						<uni-icons color="#fa6400" size="12" type="arrowright"></uni-icons>
					</view>
			</view>
			<view class="peopleBox" @click.stop="userClick" v-if="msg.mantles">
					<view class="middle_R">
						<view class="nameContent">
							<view class="memberName" v-for="(item, index) in msg.mantles.slice(0, 2)" :key="index">
								{{
									item.realNames && item.realNames.length > 2 ? item.realNames.slice(-2) :
									(item.realNames || '')
								}}
								<view class="people">责任人</view>
							</view>
							<uni-icons :type="showPopups ? 'arrowup' : 'arrowdown'" size="16" color="#999;"></uni-icons>
						</view>
					</view>
				</view>
		</view>
		<view class="popupWrapper" @click.stop="close()" :style="showPopups ? 'display: flex;' : 'display: none;'">
			<view class="calendarEdit">
				<view class="edit_bor" @click="close()">
					<view class="down-btn"></view>
				</view>
				<view class="edit_content">
					<view class="executive_tit">维保责任人</view>
					<scroll-view scroll-y="true" style="height: 480rpx;">
						<view class="executive" v-if="msg.mantles && msg.mantles.length">
							<view v-for="(item, index) in msg.mantles" :key="index"
								:class="[index === msg.mantles.length - 1 ? 'last' : '', 'executive_user']">
								<view class="memberName">
									{{
										item.realNames && item.realNames.length > 2 ? item.realNames.slice(-2) :
										(item.realNames || '')
									}}
								</view>
								<view>{{ item.realNames }}</view>
								<view style="margin-left: auto;" @click.stop="dial(item)">
									<image src="@/static/images/callPhone.svg" mode="" style="width: 48rpx;height: 48rpx;">
									</image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getDiffYear } from '@/utils/tools.js';
export default {
	props: {
		msg: {
			type: Object
		},
		isLast: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showPopups: false, // 弹出层
		};
	},
	created() {

	},
	methods: {
		toEleDetail(msg) {
			uni.navigateTo({
				url: `/subpages/elevator/projectInfo/eleDetail?id=${msg.elevatorId}`
			});
		},
		getYear(d) {
			return d ? getDiffYear(d) : '-';
		},
		// 查看更多电梯信息
		toMorePage(msg) {
			uni.navigateTo({
				url: `/subpages/elevator/projectInfo/eleDetail?id=${msg.elevatorId}&type=` + 3
			}); 
		},
		close() {
			this.showPopups = false;
		},
		userClick() {
			this.showPopups = true;
		},
		// 拨号
		dial(item) {
			if (item.phones) {
				uni.showModal({
					title: '拨打电话',
					content: item.phones,
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: item.phones
							});
						}
					}
				});
			} else {
				uni.showModal({
					content: '该责任人未绑定电话号码，请联系管理员',
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.popupWrapper {
	width: 100%;
	height: 100%;
	background-color: $uni-bg-color-mask;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-end;
	animation: fadeInOut 0.3s ease;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
}

.eleCard {
	border-bottom: 2rpx solid #eee;
	padding: 32rpx 0;
	display: flex;
	align-items: center;

	.top {
		display: flex;
		justify-content: space-between;

		.tagContent {
			padding-top: 6rpx
		}

		.name {
			font-weight: bold;
			color: #333;
			font-size: 30rpx;
			margin-right: 6rpx;
			max-width: 400rpx;
		}

		.left {
			// display: flex;
			// align-items: center;
			// justify-content: flex-start;

			image {
				vertical-align: middle;
				margin-bottom: 4rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.tag {
			padding: 0rpx 8rpx;
			font-size: 24rpx;
			border-radius: 4rpx;
			border: 1rpx solid;
			white-space: nowrap;
			margin-left: 6rpx;
		}

		.red {
			color: #E02020;
			border-color: #E02020;
		}

		.green {
			color: #16BF99;
			border-color: #16BF99;
		}

	}

	.content {
		display: flex;
		margin-top: 6rpx;
		justify-content: space-between;

		&-left {
			color: #666;
			font-size: 24rpx;
			margin-top: 12rpx;
			margin-left: 6rpx;
		}
	}

	.peopleBox {
		margin-left: auto;

		.middle_R {
			flex: 0 0 240rpx;
			display: flex;
			align-items: center;
		}

		.nameContent {
			display: flex;
			flex: 1;
			// flex-wrap:wrap;
			justify-content: flex-end;

		}

		.nameArea {
			display: flex;
			align-items: center;
			// margin-top: 14rpx;
			// margin-left: 20rpx
		}

	}

	.bottom {
		width: 110rpx;
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		text-align: center;
		color: #fa6400;
		line-height: 32rpx;
		width: 158rpx;
		height: 32rpx;
		background: #fff0e6;
		border-radius: 16rpx;
		margin-top: 12rpx;
	}
}

.memberName {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	font-size: 20rpx;
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background-color: #0091ff;
	color: #fff;
	margin-right: 12rpx;

	.people {
		width: 54rpx;
		text-align: center;
		position: absolute;
		left: -2;
		bottom: -10rpx;
		background: #faf1d9;
		border: 0.5px solid #d5c498;
		border-radius: 2px;
		box-sizing: border-box;
		font-size: 16rpx;
		color: #8d6800;
	}
}

.calendarEdit {
	width: 100%;
	background-color: #fff;
	height: 678rpx;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	position: relative;

	.edit_bor {
		width: 100%;
		padding: 20rpx 0;

		.down-btn {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
			margin: 0 auto;
		}
	}

	.edit_content {
		width: 680rpx;
		margin: 0 auto;

		.executive_tit {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.executive {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			// border-bottom: 2rpx #eee solid;
			padding-bottom: 20rpx;

			.executive_gr {
				margin-bottom: 20rpx;
			}

			.executive_user {
				display: flex;
				margin-bottom: 10rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;

				.signStatus {
					color: #FA6400;
					text-align: center;
					background-color: #ffefe3;
					font-size: 24rpx;
					font-weight: 400;
					margin: 0 10rpx;
					padding: 0 10rpx;
				}
			}

			.last {
				border: none;
			}
		}
	}
}
</style>